<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <title> 菜单管理</title>

  <!-- 自定义树样式 -->
  <link rel="stylesheet" href="${ctx}/static/support/bootstrap-tree/tree.css" type="text/css"/>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <!-- START 左侧查询框 -->
    <div class="col-lg-3 col-md-4 col-sm-5">
      <!-- 路径导航 -->
      <ol class="breadcrumb">
        <li><a href="${ctx}/workbench"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
        <li class="active">菜单管理</li>
      </ol>
      <!-- /路径导航 -->

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">菜单树</h3>
        </div>

        <div class="panel-body" id="sidebar-tree">
        </div>
      </div>

      <!-- 记录菜单树的当前的节点编号. -->
      <input type="hidden" id="nodeid" value="${nodeid}"/>

    </div>
    <!-- END 左侧查询框 -->

    <!-- START 右侧内容 -->
    <div id="constant-panel" class="col-lg-9 col-md-8 col-sm-7">
      <!-- 警告框 -->
      <c:if test="${not empty message}">
        <div class="alert alert-${message.state} alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">关闭</span>
          </button>
            ${message.message}
        </div>
      </c:if>
      <!-- ／警告框 -->

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><span class="glyphicon glyphicon-th" aria-hidden="true"></span> 菜单管理</h3>
        </div>
        <div class="panel-body">
          <!-- 响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格.-->
          <!-- 其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失 ［已改为在所有屏幕大小都显示］ -->
          <div class="table-responsive">

            <!-- table-page 没有实际样式，仅作为 Json Table 的标记. 自定义-->
            <table class="table table-hover table-page">
              <thead>

              </thead>
              <tbody>

              </tbody>
            </table>

          </div>
          <div class="pull-right" id="pagination">

          </div>
          <div class="pull-left">
            <a class="btn btn-default" href="${ctx}/sidebar/create">添加菜单</a>
          </div>
        </div>
      </div>

    </div>
    <!-- END 右侧内容 -->


  </div>

</div>

<!-- 以下开始 加载JS动态效果 -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${ctx}/static/jquery/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${ctx}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

<!-- bootstrap-tree 自定义树 -->
<script src="${ctx}/static/support/bootstrap-tree/bootstrap.asynchronous.tree.js"></script>
<!-- bootstrap-table 自定义表格 -->
<script src="${ctx}/static/support/bootstrap-table/bootstrap.table.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function () {

    //设置访问路径
    Table.setContextPath("${ctx}/sidebar");

    Tree.setPath("${ctx}");  //设置项目路径
    jQuery.ajax({
      url: "${ctx}/sidebar/asyn_tree",
      type: "post",
      dataType: "json",
      success: function (msg) {
        Tree.setData(msg);
        Tree.init("#sidebar-tree");
        Tree.onClick(function (node) {
          $("#nodeid").val(node.id);
          //更改条件
          Table.setConditions("nodeid=" + node.id);
          Table.setPage(1);
          Table.load();
        });
      }
    });

    var thead = {idField: "id", columns: [{field: "name", title: "菜单"}, {field: "code", title: "代码"}, {field: "href", title: "访问地址"}, {field: "preSidebar.name", title: "上级菜单"}]};
    Table.setHead(thead);
    Table.load();

  });


</script>
</body>
</html>